{% extends 'base.html' %}
{% block content-wrapper %}
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/index_style.css' %}">
    <div class="content-wrapper">
        <div class="row">
            <div class="col-md-12 grid-margin">
                <div class="d-flex justify-content-between flex-wrap">
                    <div class="d-flex align-items-end flex-wrap">
                        <div class="mr-md-3 mr-xl-5">
                            <h2>{{ product.title }}</h2>
                            <p class="mb-md-0"><a href="https://www.bilibili.com/video/{{ product.BVID }}">https://www.bilibili.com/video/{{ product.BVID }}</a>----------作者:
                                {% for author in product.author_list.all %}
                                    <a>{{ author.name }}</a>{% if not forloop.last %}, {% endif %}
                                {% endfor %}
                            </p>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-end flex-wrap">
                        <button class="btn btn-primary mt-2 mt-xl-0">
                            <i class="mdi mdi-flattr spin-icon" style="display: none;"></i>
                            刷新数据
                        </button>
                    </div>
                    <script src="{% static 'js/jquery.min.js' %}"></script>
                    <input type="hidden" id="csrfTokenInput" value="{{ csrf_token }}">
                    <script>
                        // 获取按钮元素
                        const downloadButton = document.querySelector('.btn.btn-primary');
                        // 获取图标元素
                        const spinIcon = document.querySelector('.spin-icon');

                        // 获取URL中的参数
                        function getUrlParam(name) {
                            const urlParams = new URLSearchParams(window.location.search);
                            return urlParams.get(name);
                        }

                        // 为按钮添加点击事件监听器
                        downloadButton.addEventListener('click', function() {
                            // 显示图标
                            spinIcon.style.display = 'inline-block';

                            // 获取CSRF令牌
                            var csrftoken = $('#csrfTokenInput').val();
                            // 获取bv参数值
                            const bv = getUrlParam('bv');

                            $.ajax({
                                url: 'details_refresh',
                                type: 'POST',
                                contentType: 'application/json',
                                headers: {
                                    'X-CSRFToken': csrftoken
                                },
                                data: JSON.stringify({ bv: bv }), // 将bv参数作为数据发送
                                success: function (response) {
                                    if (response['code'] === 200) {
                                        window.location.href = '';
                                    } else {
                                        alert('爬虫出错：' + JSON.stringify(response));
                                    }
                                    // 请求成功后隐藏图标
                                    spinIcon.style.display = 'none';
                                },
                                error: function (error) {
                                    alert('请求出错：' + JSON.stringify(error));
                                    console.log(error);
                                    // 请求出错后隐藏图标
                                    spinIcon.style.display = 'none';
                                }
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body dashboard-tabs p-0">
                        <ul class="nav nav-tabs px-4" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="overview-tab" data-toggle="tab" href="#overview" role="tab" aria-controls="overview" aria-selected="true">Overview</a>
                            </li>
                        </ul>
                        <div class="tab-content py-0 px-0">
                            <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
                                <div class="d-flex flex-wrap justify-content-xl-between">
                                    <div class="d-flex border-md-right flex-grow-1 align-items-center justify-content-center p-3 item">
                                        <svg t="1745311706692" class="icon" viewBox="0 0 1505 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2663" width="64" height="64"><path d="M751.796706 135.047529c57.946353 0 123.361882 78.064941 123.301647 166.731295 0 13.914353-12.348235 91.617882-15.420235 107.64047-1.024 5.421176-5.601882 15.540706 0 16.26353 29.876706 3.794824 56.982588-9.035294 98.846117-9.035295 41.923765 0 60.235294 1.867294 88.304941 9.035295 29.515294 7.408941 58.187294 21.684706 77.70353 45.357176 23.491765 28.611765 25.057882 61.801412 25.178353 97.581176 0.120471 72.884706-16.986353 143.962353-34.454588 214.256942-13.733647 55.416471-32.045176 115.892706-79.088942 152.997647-47.887059 37.888-110.230588 41.743059-169.020235 42.887529a1048.576 1048.576 0 0 1-198.354823-16.50447c-45.056-7.710118-100.231529-13.372235-135.348706-45.357177a69.692235 69.692235 0 0 1-11.203765-12.950588c-15.661176-23.491765-14.576941-53.007059-15.480471-79.932235-3.553882-106.616471-2.529882-213.353412-1.264941-319.969883 0.301176-25.057882 3.975529-41.321412 23.672471-57.584941 18.130824-14.998588 36.743529-29.334588 53.970823-45.296941 34.334118-31.744 71.981176-115.410824 85.835294-160.466824 14.155294-45.959529 19.696941-105.652706 82.82353-105.652706z m-399.36 305.513412c53.729882 0 97.761882 37.044706 97.761882 82.341647v342.979765c0 45.236706-43.971765 82.281412-97.822117 82.281412-53.729882 0-97.761882-37.044706-97.761883-82.281412V522.842353c0-45.296941 43.971765-82.341647 97.761883-82.341647zM1289.637647 15.058824c12.890353 0 24.816941 7.649882 29.816471 19.034352l35.538823 72.161883 79.329883 13.854117a32.346353 32.346353 0 0 1 24.816941 18.672942l1.626353 4.397176c3.915294 12.047059 0.722824 25.298824-8.252236 34.153412l-57.163294 53.850353 14.456471 77.462588a33.008941 33.008941 0 0 1-8.854588 29.033412l-4.035765 3.614117a30.599529 30.599529 0 0 1-19.395765 6.746353 35.418353 35.418353 0 0 1-15.420235-3.915294l-72.402824-36.201411-72.884706 36.141176a32.045176 32.045176 0 0 1-9.938823 3.312941l-5.360941 0.421647a32.527059 32.527059 0 0 1-19.456-6.384941 33.852235 33.852235 0 0 1-13.010824-32.948706l14.938353-77.281882-57.103059-53.248a35.177412 35.177412 0 0 1-8.914823-34.032941l0.12047-0.361412a33.129412 33.129412 0 0 1 26.925177-22.889412l79.390118-14.45647 35.599058-72.282353a33.611294 33.611294 0 0 1 29.696-18.853647z" fill="#FF4242" p-id="2664"></path><path d="M13.854118 15.119059h240.76047v963.764706H13.854118z" fill="#FFFFFF" fill-opacity="0" p-id="2665"></path></svg>
                                        <div class="d-flex flex-column justify-content-around">
                                            <small class="mb-1 text-muted">点赞数</small>
                                            <h5 class="mr-2 mb-0">{{ product.like_cnt_list }}</h5>
                                        </div>
                                    </div>
                                    <div class="d-flex border-md-right flex-grow-1 align-items-center justify-content-center p-3 item">
                                        <svg t="1745312231264" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4565" width="48" height="48"><path d="M512 977.454545C254.929455 977.454545 46.545455 769.070545 46.545455 512S254.929455 46.545455 512 46.545455s465.454545 208.384 465.454545 465.454545a465.454545 465.454545 0 0 1-465.454545 465.454545zM367.941818 246.039273a33.233455 33.233455 0 0 0 0 66.466909h288.116364a33.233455 33.233455 0 0 0 0-66.466909h-288.116364z m177.338182 123.205818V312.506182h-66.56v56.785454A210.106182 210.106182 0 0 0 279.272727 578.466909v44.311273a33.233455 33.233455 0 0 0 66.513455 0v-44.311273a143.639273 143.639273 0 0 1 132.980363-142.754909v310.318545a33.233455 33.233455 0 1 0 66.46691 0V435.758545a143.639273 143.639273 0 0 1 132.980363 142.75491v44.311272a33.233455 33.233455 0 0 0 66.513455 0v-44.311272a210.106182 210.106182 0 0 0-199.493818-209.268364z" fill="#00aeec" p-id="4566"></path></svg>
                                        <div class="d-flex flex-column justify-content-around">
                                            <small class="mb-1 text-muted">投币数</small>
                                            <h5 class="mr-2 mb-0">{{ product.coin_cnt_list }}</h5>
                                        </div>
                                    </div>
                                    <div class="d-flex border-md-right flex-grow-1 align-items-center justify-content-center p-3 item">
                                        <svg t="1745312255780" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5567" width="32" height="32"><path d="M249.027212 1024a81.085086 81.085086 0 0 1-47.614289-15.359448 82.461037 82.461037 0 0 1-34.302767-81.917056l40.958528-251.894948a31.99885 31.99885 0 0 0-8.703687-27.647006L23.755308 466.452037a83.932984 83.932984 0 0 1-19.455301-84.988946 82.301042 82.301042 0 0 1 65.917631-55.805994L307.905096 289.306403a31.198879 31.198879 0 0 0 24.063135-17.919356l104.956229-223.351973a82.90902 82.90902 0 0 1 150.394595 0l104.540243 223.351973a31.99885 31.99885 0 0 0 24.063135 17.919356l237.463466 36.350694a83.453001 83.453001 0 0 1 46.590326 140.79494l-175.609689 180.729505a32.606828 32.606828 0 0 0-8.703687 27.647006l40.958528 251.894948a83.804988 83.804988 0 0 1-34.302767 81.917056 81.853058 81.853058 0 0 1-88.060836 4.607834l-206.712571-114.683878a32.670826 32.670826 0 0 0-30.718896 0l-207.352548 115.19586a87.964839 87.964839 0 0 1-40.446547 10.239632z" fill="#FEB432" p-id="5568"></path></svg>
                                        <div class="d-flex flex-column justify-content-around">
                                            <small class="mb-1 text-muted">收藏数</small>
                                            <h5 class="mr-2 mb-0">{{ product.favorite_cnt_list }}</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <p class="card-title">封面</p>
                        <div id="cash-deposits-chart-legend" class="d-flex justify-content-center pt-3">
                            <img src="{% static 'pics/' %}{{ product.BVID }}.png" alt="封面" style="width: 100%">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <div id="total-sales-chart-legend">
                            {{ sentiment_pie_view|safe }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        {{ wordcloud_view|safe }}
                    </div>
                </div>
            </div>
            <div class="col-md-4 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <div id="total-sales-chart-legend">
                            {{ analysis_chart|safe }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <div id="total-sales-chart-legend">
                            {{ sentiment2_pie_view|safe }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        {{ wordcloud2_view|safe }}
                    </div>
                </div>
            </div>
            <div class="col-lg-6 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Line chart</h4>
                        {{ audience_activity_combine|safe }}
                    </div>
                </div>
            </div>
            <div class="col-lg-6 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Bar chart</h4>
                        {{ compare_with_top5|safe }}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}